<template>
<div class="fontBox">  
    切换字体
    <el-dropdown @command='changeFontStyle'>
        <span class="el-dropdown-link">
            字体类型<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown"  >
            <el-dropdown-item v-for="(item , key) in fontFamilys"  :command='key' :key="key">{{item.name}}</el-dropdown-item>
        </el-dropdown-menu>
    </el-dropdown>

</div>
     
</template>
<script>
import fontJson from '@/utils/config/font.json'
export default {
    props: {
        value: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            styleDom: document.createElement('style'),
            fontFamilys: fontJson
        }
    },
    methods: {
        changeFontStyle(val) {
            this.$emit('input', val);
            this.$emit('changeConfig');
            this.styleDom.innerText = fontJson[val].styleText;
            this.styleDom.type = "text/css"
        }
    },
    created() {
        document.getElementsByTagName('head')[0].appendChild(this.styleDom);
        this.styleDom.innerText = fontJson[this.value].styleText;
    }
}
</script>
<style lang="scss" scoped>
.el-dropdown-link {
        cursor: pointer;
        margin: 5px;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
    .fontBox{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
</style>
